<template>
	<Theme>
		<view class="u-page">
			<u-navbar bgColor="rgb(0, 178, 128)" :safeAreaInsetTop="false" :placeholder="true" :border-bottom="false">
				<template #left>
					<view class="fac" @click="navto('location/index')">
						<u-icon name="map" color="#FFF" size="32" />
						<view v-if="location.name" class="tl1 cw px3">{{location.name}}</view>
						<view v-else-if="location.address" class="tl1 cw px3">{{location.address}}</view>
						<view v-else class="tl1 cw px3">定位</view>
						<u-icon name="arrow-down" color="#FFF" size="24" />
					</view>
					<view class="pr" v-if="showShift&&local.city_id==0&&location.city_id==0">
						<view class="pa l0 mt8 wvt px4">
							<view class="bgab6 fac py3 px6 br3">
								<view class="f1 cw"><text>开启定位权限</text><text class="tag-primary p2 ml4" @click="setting">去设置</text></view>
								<text class="px2 fs40 cw" @click="$store.main.update({showShift: false})">×</text>
							</view>
						</view>
					</view>
					<view class="pr" v-else-if="showShift&&local.city_id&&location.city_id!=local.city_id">
						<view class="pa l0 mt8 wvt px4">
							<view class="bgab6 fac py3 px6 br3">
								<view></view>
								<view class="f1 cw">定位显示你在 {{filter.region(local.city_id)}}</view>
								<view class="tag-primary br2 p2" @click="shift">切换到{{filter.region(local.city_id)}}</view>
							</view>
						</view>
					</view>
				</template>
				<template #right>
					<view class="fac">
						<!-- #ifndef MP -->
						<view class="pr mr4">
							<u-badge :offset="[0,0]" :count="unreadCount" />
							<u-icon name="chat" color="white" size="40" @click="navto('notice/index')" />
						</view>
						<!-- #endif -->
					</view>
				</template>
			</u-navbar>
		</view>
		<Tabbar/>
	</Theme>
</template>

<script lang="ts">
import util from '@/utils/util'
import {page,list} from '@/mixins'
import Tabbar from './Tabbar'
import {mapState} from 'pinia'
import {mainStore, userStore} from '@/store'

export default {
	mixins: [page,list],
	components: {Tabbar},
	data () {
		return {
			item_id: 0,
			swiperList: [],
			presellList: [],
			localTotal: 0,
			tips: [
				'预售商品 , 当日下单',
				'1. 选择“到店自提” , 次日16点后可自提。',
				'2. 选择“商家配送” , 同城区域30~60分送达。'
			],
			querys: {presell: 0},
			loadPath: 'home',
			over: false
		}
	},
	computed: {
		...mapState(mainStore, ['local', 'showShift']),
		...mapState(userStore, ['unreadCount'])
	},
	methods: {
		reachBottom() {
			this.page += 1;
			this.loadstate = 1
			const isRemote = this.list.length>=this.localTotal
			const page = isRemote ? this.page - Math.ceil(this.localTotal/10) : this.page
			uni.$u.http.get('item/' + (isRemote?'remote':'near'), {...this.querys, page: page}).then(res=>{
				this.list = this.list.concat(res.list)
				this.loadstate = 2
			}).catch(()=>{})
		},
		shift(){
			uni.$u.http.post('city/change/' + this.local.city_id).then(()=>{
				uni.$store.main.update({location: this.local, showShift: false})
			}).catch(()=>{})
		},
		setting(){
			uni.openSetting()
		},
		scan() {
			const that = this
			util.scan(({result}) => {
				uni.$u.http.get('item/barcode', {barcode: result, city_id: that.location.city_id}).then((resp: {id: number})=>{
					if(resp.id > 0){
						util.navto('item/view', {id: resp.id})
					} else {
						util.msg('未找到当前商品')
					}
				}).catch(()=>{})
			})
		}
	},
	watch: {
		location: {
			handler(){
				this.reload()
			},
			deep: true
		}
	}
}
</script>
